<template>
  <div class="home">
    <div class="header">
      <nav-bar @select="select" />
    </div>
    <div class="content">
      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" header="This is panel header 1">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="This is panel header 3" disabled>
          <p>{{ text }}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
      activeKey: ['1']
    }
  },
  watch: {
    activeKe (key) {
      window.console.log(key)
    }
  },
  methods: {
    select (item) {
      this.$router.push(item.path)
    }
  },
  layout: 'footer'
}
</script>

<style lang="css" scoped>
.home {
  background-color: #eee;
}
.home .content {
  width: 1200px;
  margin: 0 auto;
  height: 100vh;
}
</style>
